<template>
    <div class="work-adv-result">
        <h4 class="page-work-title"><label>邀请顾问</label></h4>
        <div class="result-box">
            <template v-if="isRead">
                <p>你可以扫描下方二维码，分享页面给你的顾问</p>
            </template>
            <div v-else>
                <div class="tip-icon"><i class="el-icon-success"></i></div>
                <p>顾问添加成功</p>
                <p>我们已发送短信通知TA接收您的推荐</p>
                <p>你也可以扫描下方二维码，通过微信好友邀请</p>
            </div>

            <div class="qrcode">
                <vue-qr 
                    class="qrcode-inner" 
                    :text="adviseUrl" 
                    :size="240"
                    qid="adviseUrl"></vue-qr>
            </div>
        </div>
    </div>
</template>

<script>
import VueQr from 'vue-qr'
export default {
    components: {
        VueQr
    },
    props: {
        id: String
    },
    data(){
        return {
            isRead: false,
            inviteUrl: process.env.NODE_ENV === 'development' 
            ? 'http://localhost:6060/#/hire/invite'
            : 'http://ygsj.weituandui.com.cn/#/hire/invite',
        }
    },
    computed: {
        adviseUrl(){
            return `${this.inviteUrl}/${this.id}`
        }
    },
    created(){
        this.isRead = this.$route.query.read || false
    }
}
</script>


<style lang="less">
.work-adv-result{
    .result-box{
        padding: 50px;
        text-align: center;
        .tip-icon{
            margin-bottom: 20px;
            font-size: 80px;
            i{
                color: #4caf50;
            }
        }
        p{
            line-height: 1.8;
            font-size: 13px;
            color: #333;
        }
    
        .qrcode{
            margin: 20px 0;
            .qrcode-inner{
                // font-size: 160px;
            }
        }
    }
}
</style>

